<div class="page has-sidebar-left  height-full">


    <header class="blue accent-3 relative">
        <div class="container-fluid text-white">
            <div class="row p-t-b-10 ">
                <div class="col">
                    <h4>
                        <i class="icon-bullhorn"></i>
                        圈子管理
                    </h4>
                </div>
            </div>
            <div class="row">
                <ul class="nav responsive-tab nav-material nav-material-white">


                    <li>
                        <a class="nav-link " href="<?php echo url('vip/circle'); ?>"><i class="icon icon-list"></i>圈子列表</a>
                    </li>
                    <li>
                        <a class="nav-link active" href="<?php echo url('vip/add_circle'); ?>"><i
                                class="icon icon-plus-circle"></i> 添加</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>


    <div class="container-fluid animatedParent animateOnce">
        <div class="animated fadeInUpShort go">
            <div class="container-fluid my-3">
                <div class="row">
                    <div class="col-md-7 ">
                        <form role="form" id="form1" method="post" action="{:url('vip/add_circle')}"
                              enctype="multipart/form-data">
                            <div class="card no-b  no-r">
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="col-md-8">
                                            <div class="form-group m-0">
                                                <label for="name" class="col-form-label s-12">圈子名称</label>
                                                <input class="form-control r-0 light s-12 " name="title"
                                                       required="required" placeholder="" type="text">

                                            </div>
                                            <!--
                                                                                <div class="form-row">
                                                                                    <div class="form-group col-6 m-0">
                                                                                        <label for="cnic" class="col-form-label s-12"><i class="icon-fingerprint"></i>分类</label>


                                                                                <select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" name="type">
                                                             <option value="0"}>官方公告</option>
                                                             <option value="1"}>最新消息</option>
                                                             <option value="2"}>小编推荐</option>
                                                                                </select>



                                                                                    </div>


                                                                                </div>

                                                                    -->


                                        </div>


                                        <div class="col-md-3 offset-md-1">


                                            <!--


                                             <input type="file" id="picture" style="display:none;" class="" name="picture" multiple accept="image/png,image/gif,image/jpeg,image/jpg"/>

                              <span id="warp">
                                  <input type='file' name="picture" onchange="changeImg(this)" style="display: none;"  accept = 'image/gif,image/jpeg,image/jpg,image/png' />
                                  <img style="width:75px;" src="/public/static/assets/images/tianjia.png">
                              </span>

                                         -->


                                            <div style=" min-height: 150px; border: 2px solid rgba(0,0,0,.3); background: #fff; padding: 20px 20px; border: 2px dashed #e1e8ee; ">
                                                <div class="btn btn-primary btn-xs">添加图片</div>
                                                <input type="file" id="picture" onchange="changeImg(this)"
                                                       name="picture" required="required" multiple
                                                       accept="image/png,image/gif,image/jpeg,image/jpg"/ style="width:
                                                200px;height: 36px; position: absolute; left: -100px; top: 0; z-index:1;
                                                -moz-opacity: 0; -ms-opacity: 0; -webkit-opacity: 0; opacity: 0; filter:
                                                alpha(opacity=0);cursor: pointer; ">

                                                <img id="RyanImg"
                                                     src="">
                                                <div id="RyanDiv"></div>
                                            </div>


                                            <script type="text/javascript">
                                                //判断浏览器是否支持FileReader接口
                                                if (typeof FileReader == 'undefined') {
                                                    document.getElementById("RyanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
                                                    //使选择控件不可操作
                                                    document.getElementById("picture").setAttribute("disabled", "disabled");
                                                }

                                                //选择图片，马上预览
                                                function changeImg(obj) {
                                                    var file = obj.files[0];

                                                    console.log(obj);
                                                    console.log(file);
                                                    console.log("file.size = " + file.size);  //file.size 单位为byte

                                                    var reader = new FileReader();

                                                    //读取文件过程方法
                                                    reader.onloadstart = function (e) {
                                                        console.log("开始读取....");
                                                    }
                                                    reader.onprogress = function (e) {
                                                        console.log("正在读取中....");
                                                    }
                                                    reader.onabort = function (e) {
                                                        console.log("中断读取....");
                                                    }
                                                    reader.onerror = function (e) {
                                                        console.log("读取异常....");
                                                    }
                                                    reader.onload = function (e) {
                                                        console.log("成功读取....");

                                                        var img = document.getElementById("RyanImg");
                                                        img.src = e.target.result;
                                                        //或者 img.src = this.result;  //e.target == this
                                                    }

                                                    reader.readAsDataURL(file)
                                                }
                                            </script>


                                        </div>

                                    </div>

                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">圈子详情</h5>
                                    <div class="form-row">
                                        <textarea class="form-control r-0" rows="3" name="content"
                                                  id="content"></textarea>

                                    </div>

                                </div>
                                <hr>
                                <div class="card-body">
                                    <button type="submit" class="btn btn-primary btn-lg"><i class="icon-save mr-2"></i>保存发布
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>


                    <div class="col-md-5">
                        <h3>圈子帮助</h3>
                        <hr>
                        <p>1.圈子名称：尽量控制在2-8字简洁明了.</p>
                        <p>2.外部跳转地址 / 公告详情：填写外部跳转地址则不显示公告详情 否则反之.</p>
                        <!--                        <p style="color: #03a9f4;">Tips：跳转外部 或 公告详情 二选一即可.</p>-->
                        <p>3.图片必须上传！且文件后缀不可大写.</p>
                        <p><i class="icon-check3 text-primary   mr-3"></i> <span class="badge badge-primary">png</span>
                            <span class="badge badge-primary">gif</span> <span class="badge badge-primary">jpeg</span>
                            <span class="badge badge-primary">jpg</span></p>
                        <p><i class="icon-close2 pink-text mr-3"></i> <span class="badge badge-danger">PNG</span> <span
                                class="badge badge-danger">GIF</span> <span class="badge badge-danger">JPG</span> <span
                                class="badge badge-danger">……</span></p>

                        <p>4.图片建议尺寸（像素）：80*80 - 100*100 / 100*200</p>
                        <p>5.图片建议小于200KB.</p>


                        <h4 class="mt-5">未完待续……</h4>
                        <hr>

                        <a class="btn btn-outline-primary btn-xs">Perfect Network Service</a>

                    </div>


                </div>
            </div>
        </div>
    </div>
</div>


{$code?'
<div class="col-md-6">
    <div class="alert alert-danger" id="alert" style="position:fixed;right:0px;bottom:0px;  width: 350px">
        <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
        </button>
        <strong> 糟糕 !</strong> '.$msg.'
    </div>
</div>

':''}
